import React, { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';
import { motion, AnimatePresence } from 'framer-motion';
import Breadcrumb from '../components/common/Breadcrumb';
import BackToTop from '../components/common/BackToTop';
import { projects } from '../data/projects';
import './PortfolioPage.css';

const PortfolioPage = () => {
  const [filteredProjects, setFilteredProjects] = useState(projects);
  const [activeFilter, setActiveFilter] = useState('all');

  // 获取所有唯一的项目分类
  const categories = ['all', ...new Set(projects.map(project => project.category))];
  
  // 当过滤器改变时，过滤项目
  useEffect(() => {
    if (activeFilter === 'all') {
      setFilteredProjects(projects);
    } else {
      setFilteredProjects(projects.filter(project => project.category === activeFilter));
    }
  }, [activeFilter]);

  // 处理过滤器点击
  const handleFilterClick = (category) => {
    setActiveFilter(category);
  };

  // 动画变体
  const containerVariants = {
    hidden: { opacity: 0 },
    visible: {
      opacity: 1,
      transition: {
        staggerChildren: 0.1
      }
    }
  };

  const itemVariants = {
    hidden: { y: 20, opacity: 0 },
    visible: {
      y: 0,
      opacity: 1,
      transition: {
        duration: 0.5
      }
    }
  };

  // 格式化分类名称
  const formatCategoryName = (category) => {
    const categoryMap = {
      'all': '全部',
      'web': 'Web应用',
      'mobile': '移动应用',
      'data': '数据分析',
      'iot': '物联网'
    };
    
    return categoryMap[category] || category;
  };

  return (
    <div className="portfolio-page">
      <Breadcrumb />
      
      <div className="container">
        <div className="portfolio-header">
          <h1 className="page-title">我的作品集</h1>
          <p className="page-description">
            浏览我的项目作品，展示了我在不同技术领域的专业能力和创意思维
          </p>
        </div>
        
        <div className="portfolio-filters">
          {categories.map((category, index) => (
            <button
              key={index}
              className={`filter-btn ${activeFilter === category ? 'active' : ''}`}
              onClick={() => handleFilterClick(category)}
            >
              {formatCategoryName(category)}
            </button>
          ))}
        </div>
        
        <AnimatePresence mode="wait">
          <motion.div 
            key={activeFilter}
            className="projects-grid"
            variants={containerVariants}
            initial="hidden"
            animate="visible"
            exit={{ opacity: 0 }}
          >
            {filteredProjects.map(project => (
              <motion.div 
                key={project.id} 
                className="project-card"
                variants={itemVariants}
              >
                <div className="project-image-container">
                  <img 
                    src={project.thumbnail} 
                    alt={project.title} 
                    className="project-image"
                  />
                  <div className="project-overlay">
                    <Link to={`/portfolio/${project.id}`} className="project-link">
                      查看详情
                    </Link>
                  </div>
                </div>
                <div className="project-content">
                  <h2 className="project-title">{project.title}</h2>
                  <div className="project-tags">
                    {project.tags.map((tag, i) => (
                      <span key={i} className="project-tag">{tag}</span>
                    ))}
                  </div>
                  <p className="project-description">{project.description}</p>
                </div>
              </motion.div>
            ))}
          </motion.div>
        </AnimatePresence>
      </div>
      
      <BackToTop />
    </div>
  );
};

export default PortfolioPage;
